import { InputNumber, Space } from "antd";
import { useEffect } from "react";
import { InputHandle, OutputHandle, NodeContainer } from "./NodeBase";

function ImageProjectionNode({ data }) {
  return (
    <>
      <InputHandle label="image" id="0" />

      <OutputHandle label="image" id="0" />

      <NodeContainer title="投影矫正" />
    </>
  );
}

function ImageDeBlurNode({ data }) {
  useEffect(() => {
    if (data.options.len === undefined) {
      data.options.len = 80;
      data.options.theta = 150;
      data.options.k = 0.001;
    }
    console.log(data.options)
  }, []);

  function onLenChange(value) {
    data.options.len = value;
  }
  function onThetaChange(value) {
    data.options.theta = value;
  }
  function onRateChange(value) {
    data.options.k = value;
  }
  return (
    <>
      <InputHandle label="image" id="0" />

      <OutputHandle label="image" id="0" />

      <NodeContainer title="去模糊">
        <Space direction="vertical">
          <InputNumber
            prefix="len"
            defaultValue={80}
            onChange={onLenChange}
          ></InputNumber>
          <InputNumber
            prefix="theta"
            defaultValue={150}
            onChange={onThetaChange}
          ></InputNumber>
          <InputNumber
            prefix="k"
            defaultValue={0.001}
            onChange={onRateChange}
          ></InputNumber>
        </Space>
      </NodeContainer>
    </>
  );
}

export { ImageProjectionNode, ImageDeBlurNode };
